import {
  ElButton,
  ElInput,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElCheckboxGroup,
  ElCheckbox,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElNotification,
  ElIcon,
  ElSwitch,
} from "element-plus";
import { ref } from "vue";
import deepcopy from "deepcopy";
import { getCity } from "../api/index";
let treeComponent = (data, AllData) => {
  return (
    <>
      <div class="text_picker">
        这个地方不太清楚搞啥样的，先空着
        {/* <div class="addCheck">
          <span>组件控制</span>
          <span
            onClick={() =>
              AllData.blocks.splice(
                AllData.blocks.findIndex((item) => item.id == data.value.id),
                1
              )
            }
          >
            删除组件
          </span>
        </div> */}
      </div>
    </>
  );
};
let boxComponent = (data, AllData) => {
  const handle_backgroundChange = (e) => {
    data.value.backgroundColor = e;
  };
  const handle_fontColorChange = (e) => {
    data.value.color = e;
  };
  const handleInputWidth = (e) => {
    if (e > 2000) {
      data.value.width = 2000.0;
      return;
    } else if (e < 10) {
      data.value.width = 10.0;
    } else {
      data.value.width = Number(e).toFixed(1);
    }
  };
  return (
    <>
      <div class="text_picker">
        <div class="addCheck">
          <span>组件控制</span>
          <span
            onClick={() =>
              AllData.blocks.splice(
                AllData.blocks.findIndex((item) => item.id == data.value.id),
                1
              )
            }
          >
            删除组件
          </span>
        </div>
      </div>
      <div class="text_attr">
        <p>距离顶部距离:</p>
        <ElInput
          type="number"
          v-model={data.value.top}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>距离左边距离:</p>
        <ElInput
          type="number"
          v-model={data.value.left}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>宽度:</p>
        <ElInput
          type="number"
          v-model={data.value.width}
          onInput={(e) => {
            handleInputWidth(e);
          }}
          placeholder="区块宽度"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>高度:</p>
        <ElInput
          type="number"
          v-model={data.value.height}
          placeholder="区块高度"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>四角弧度:</p>
        <ElInput
          type="number"
          v-model={data.value.borderRadius}
          placeholder="四角弧度"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>遮盖层级:</p>
        <ElInput
          type="number"
          v-model={data.value.zIndex}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>背景颜色:</p>
        <vue3-color-picker
          pureColor={data.value.backgroundColor}
          isWidget={false}
          disableHistory={false}
          format={"hex"}
          zIndex={999}
          onPureColorChange={handle_backgroundChange}
        />
      </div>
    </>
  );
};
let textComponent = (data, AllData) => {
  const handle_backgroundChange = (e) => {
    data.value.backgroundColor = e;
  };
  const handle_fontColorChange = (e) => {
    data.value.color = e;
  };
  const handleText = () => {
    console.log("输入了");
  };
  return (
    <>
      <div class="text_picker">
        <div class="addCheck">
          <span>组件控制</span>
          <span
            onClick={() =>
              AllData.blocks.splice(
                AllData.blocks.findIndex((item) => item.id == data.value.id),
                1
              )
            }
          >
            删除组件
          </span>
        </div>
      </div>
      <div class="text_attr">
        <p>距离顶部距离:</p>
        <ElInput
          type="number"
          v-model={data.value.top}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>距离左边距离:</p>
        <ElInput
          type="number"
          v-model={data.value.left}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>文本内容:</p>
        <ElInput
          v-model={data.value.value}
          placeholder="预览输入框"
          onInput={handleText}
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>文本框宽度:</p>
        <ElInput
          type="number"
          v-model={data.value.width}
          placeholder=""
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>文本框高度:</p>
        <ElInput
          type="number"
          v-model={data.value.height}
          placeholder=""
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>字体颜色:</p>
        {/* pureColor:默认颜色,isWidget是否嵌入式弹窗显示,disableHistory是否禁用历史选择值,format:值的数据格式hex:十六进制hsl:hsl(0,77%,45%),zIndex:层级 */}
        <vue3-color-picker
          pureColor={data.value.color}
          isWidget={false}
          disableHistory={false}
          format={"hex"}
          zIndex={999}
          onPureColorChange={handle_fontColorChange}
        />
      </div>
      <div class="text_attr">
        <p>遮盖层级:</p>
        <ElInput
          type="number"
          v-model={data.value.zIndex}
          placeholder="预览输入框"
        ></ElInput>
      </div>
    </>
  );
};
let buttonComponent = (data, AllData) => {
  const handle_backgroundChange = (e) => {
    data.value.backgroundColor = e;
  };
  const handle_fontColorChange = (e) => {
    data.value.color = e;
  };
  return (
    <>
      {/* <div class="text_picker">
        <div class="addCheck">
          <span>组件控制</span>
          <span
            onClick={() =>
              AllData.blocks.splice(
                AllData.blocks.findIndex((item) => item.id == data.value.id),
                1
              )
            }
          >
            删除组件
          </span>
        </div>
      </div> */}
      <div class="text_attr">
        <p>距离顶部距离:</p>
        <ElInput
          type="number"
          v-model={data.value.top}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>距离左边距离:</p>
        <ElInput
          type="number"
          v-model={data.value.left}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>宽度:</p>
        <ElInput
          type="number"
          v-model={data.value.width}
          placeholder="区块宽度"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>高度:</p>
        <ElInput
          type="number"
          v-model={data.value.height}
          placeholder="区块高度"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>四角弧度:</p>
        <ElInput
          type="number"
          v-model={data.value.borderRadius}
          placeholder="四角弧度"
        ></ElInput>
      </div>
      {/* <div class="text_attr">
        <p>文本内容:</p>
        <ElInput v-model={data.value.value} placeholder="预览输入框"></ElInput>
      </div> */}
      <div class="text_attr">
        <p>按钮颜色:</p>
        <vue3-color-picker
          pureColor={data.value.backgroundColor}
          isWidget={false}
          disableHistory={false}
          format={"hex"}
          zIndex={999}
          onPureColorChange={handle_backgroundChange}
        />
      </div>
      <div class="text_attr">
        <p>文字颜色:</p>
        <vue3-color-picker
          pureColor={data.value.color}
          isWidget={false}
          disableHistory={false}
          format={"hex"}
          zIndex={999}
          onPureColorChange={handle_fontColorChange}
        />
      </div>
      <div class="text_attr">
        <p>遮盖层级:</p>
        <ElInput
          type="number"
          v-model={data.value.zIndex}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>按钮图标:</p>
        <ElInput
          v-model={[data.value.icon, "modelValue", ["trim"]]}
          placeholder="图标名"
        ></ElInput>
      </div>
      <div class="text_icon">{iconComponent()}</div>
    </>
  );
};

let inputComponent = (data, AllData) => {
  const handle_backgroundChange = (e) => {
    data.value.backgroundColor = e;
  };
  const handle_fontColorChange = (e) => {
    data.value.color = e;
  };
  const handleBlur = () => {
    try {
      if (data.value.customAssist.length == 0) {
        data.value.custom = "value";
        ElNotification({
          title: "温馨提示",
          message: "绑定字段为空时，会被替换为value",
        });
        return;
      }
      let beforeCustom = data.value.custom;
      data.value.custom = data.value.customAssist;
      if (!(data.value.custom in data.value)) {
        data.value[data.value.custom] = deepcopy(data.value[beforeCustom]); //将之前赋予的值都传给新绑定属性
        if (beforeCustom in data.value) {
          //删除之前的自定义属性
          delete data.value[beforeCustom];
        }
      }
      ElNotification({
        title: "恭喜绑定成功",
        message: `绑定字段为${data.value.custom}`,
      });
      data.value.customAssist = "";
    } catch (error) {
      //因为是jsx，这个整体dom都没了，被干掉了估计，释放的太快了
      ElNotification({
        title: "绑定字段失败！",
        message: "只有任意点击画布区域外才能保存成功哦！",
      });
    }
  };

  return (
    <>
      <div class="text_picker">
        <div class="addCheck">
          <span>组件控制</span>
          <span
            onClick={() =>
              AllData.blocks.splice(
                AllData.blocks.findIndex((item) => item.id == data.value.id),
                1
              )
            }
          >
            删除组件
          </span>
        </div>
      </div>
      <div class="text_attr">
        <p>距离顶部距离:</p>
        <ElInput
          type="number"
          v-model={data.value.top}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>距离左边距离:</p>
        <ElInput
          type="number"
          v-model={data.value.left}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>
          <span>绑定字段:</span>
          <span style="color:red">(当前为{data.value.custom})</span>
        </p>
        <ElInput
          v-model={data.value.customAssist}
          placeholder="输入字段名"
          maxlength={20}
          onBlur={handleBlur}
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>空提示语:</p>
        <ElInput
          v-model={data.value.placeholder}
          placeholder="请输入内容"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>遮盖层级:</p>
        <ElInput
          type="number"
          v-model={data.value.zIndex}
          placeholder="预览输入框"
        ></ElInput>
      </div>
    </>
  );
};
//下拉接口调用状态提示语
let isLoading = ref(false);
let selectComponent = (data, AllData) => {
  const handleBlur = () => {
    try {
      if (data.value.customAssist.length == 0) {
        data.value.custom = "value";
        ElNotification({
          title: "温馨提示",
          message: "绑定字段为空时，会被替换为value",
        });
        return;
      }
      let beforeCustom = data.value.custom;
      data.value.custom = data.value.customAssist;
      if (!(data.value.custom in data.value)) {
        data.value[data.value.custom] = deepcopy(data.value[beforeCustom]); //将之前赋予的值都传给新绑定属性
        if (beforeCustom in data.value) {
          //删除之前的自定义属性
          delete data.value[beforeCustom];
        }
      }
      ElNotification({
        title: "恭喜绑定成功",
        message: `绑定字段为${data.value.custom}`,
      });
      data.value.customAssist = "";
    } catch (error) {
      //因为是jsx，这个整体dom都没了，被干掉了估计，释放的太快了
      ElNotification({
        title: "绑定字段失败！",
        message: "只有任意点击画布区域外才能保存成功哦！",
      });
    }
  };
  //删除手动添加选项
  const deleteSelect = (index) => {
    if (data.value.data.length == 1) {
      ElNotification({
        title: "温馨提示",
        message: "下拉选项至少一个选项哦！",
      });
      return;
    }
    data.value.data.splice(index, 1);
  };
  //下拉变化事件
  const handleSecletChange = (e) => {
    if (e) {
      isLoading.value = true;
      getCity(e)
        .then((res) => {
          console.log(res);
          data.value.data = res.data;
          isLoading.value = false;
        })
        .catch((err) => {
          console.log(err);
          data.value.data = [];
          isLoading.value = false;
        });
    } else {
      data.value.data = [];
      isLoading.value = false;
    }
  };
  //手动添加与接口调用切换开关事件
  const handleSwitch = (e) => {
    //切换必先清除选项数据和选中接口
    data.value.data = [];
    data.value.selectedApiSrc = "";
  };
  //普通变量，只为预览不报错
  let testValue = "";

  return (
    <>
      <div class="text_picker">
        <div class="addCheck">
          <span>组件控制</span>
          <span
            onClick={() =>
              AllData.blocks.splice(
                AllData.blocks.findIndex((item) => item.id == data.value.id),
                1
              )
            }
          >
            删除组件
          </span>
        </div>
      </div>
      <div class="text_attr">
        <p>距离顶部距离:</p>
        <ElInput
          type="number"
          v-model={data.value.top}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>距离左边距离:</p>
        <ElInput
          type="number"
          v-model={data.value.left}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>
          <span>绑定字段:</span>
          <span style="color:red">(当前为{data.value.custom})</span>
        </p>
        <ElInput
          v-model={data.value.customAssist}
          placeholder="输入字段名"
          maxlength={20}
          onBlur={handleBlur}
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>下拉提示语:</p>
        <ElInput
          v-model={data.value.placeholder}
          placeholder="提示语"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>遮盖层级:</p>
        <ElInput
          type="number"
          v-model={data.value.zIndex}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_select">
        <div class="autoOrApi">
          <span>手动添加/接口调用</span>
          <ElSwitch
            v-model={data.value.autoOrApi}
            onChange={(e) => {
              handleSwitch(e);
            }}
          />
        </div>
        <div class="modelTip">
          当前模式为:{data.value.autoOrApi ? "接口调用" : "手动添加"}
        </div>
        <div class="handleAdd" v-show={!data.value.autoOrApi}>
          <div class="addSelect">
            <span>下拉框选项:</span>
            <span
              onClick={() => {
                if (data.value.data.length < 49) {
                  data.value.data.push({
                    label: "",
                    value: "",
                  });
                } else {
                  ElNotification({
                    title: "温馨提示",
                    message: "限制选项50个哦！,更多请联系开发人员",
                  });
                }
              }}
            >
              新增
            </span>
          </div>
          {data.value.data.map((item, index) => {
            return (
              <div class="selectOptions">
                <span>{index + 1}</span>
                <div class="selectInput">
                  <div class="selectChild">
                    <span>选项名:</span>
                    <ElInput v-model={item.label} placeholder=""></ElInput>
                  </div>
                  <div class="selectChild">
                    <span>选项值:</span>
                    <ElInput
                      v-model={item.value}
                      placeholder="建议英文"
                    ></ElInput>
                  </div>
                </div>
                <div class="selectBtn">
                  <span
                    onClick={() => {
                      deleteSelect(index);
                    }}
                  >
                    删除
                  </span>
                </div>
              </div>
            );
          })}
        </div>
        <div class="ApiAdd" v-show={data.value.autoOrApi}>
          <ElSelect
            v-model={data.value.selectedApiSrc}
            clearable
            placeholder="请选择一个接口"
            onChange={(e) => {
              handleSecletChange(e);
            }}
          >
            {data.value.apiOptions.map((item) => {
              return (
                <ElOption
                  label={item.remark + "[" + item.src + "]"}
                  value={item.src}
                ></ElOption>
              );
            })}
          </ElSelect>
          <div class="preTip">预览接口结果:</div>
          <ElSelect
            placeholder={isLoading.value ? "接口正在调用..." : "查看当前选项"}
            v-model={testValue}
          >
            {data.value.data.map((item) => {
              return (
                <ElOption label={item.label} value={item.value}></ElOption>
              );
            })}
          </ElSelect>
        </div>
      </div>
    </>
  );
};
let datetimeComponent = (data, AllData) => {
  const handle_backgroundChange = (e) => {
    data.value.backgroundColor = e;
  };
  const handle_fontColorChange = (e) => {
    data.value.color = e;
  };
  const handleBlur = () => {
    try {
      if (data.value.customAssist.length == 0) {
        data.value.custom = "value";
        ElNotification({
          title: "温馨提示",
          message: "绑定字段为空时，会被替换为value",
        });
        return;
      }
      let beforeCustom = data.value.custom;
      data.value.custom = data.value.customAssist;
      if (!(data.value.custom in data.value)) {
        data.value[data.value.custom] = deepcopy(data.value[beforeCustom]); //将之前赋予的值都传给新绑定属性
        if (beforeCustom in data.value) {
          //删除之前的自定义属性
          delete data.value[beforeCustom];
        }
      }
      ElNotification({
        title: "恭喜绑定成功",
        message: `绑定字段为${data.value.custom}`,
      });
      data.value.customAssist = "";
    } catch (error) {
      //因为是jsx，这个整体dom都没了，被干掉了估计，释放的太快了
      ElNotification({
        title: "绑定字段失败！",
        message: "只有任意点击画布区域外才能保存成功哦！",
      });
    }
  };
  return (
    <>
      <div class="text_picker">
        <div class="addCheck">
          <span>组件控制</span>
          <span
            onClick={() =>
              AllData.blocks.splice(
                AllData.blocks.findIndex((item) => item.id == data.value.id),
                1
              )
            }
          >
            删除组件
          </span>
        </div>
      </div>
      <div class="text_attr">
        <p>距离顶部距离:</p>
        <ElInput
          type="number"
          v-model={data.value.top}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>距离左边距离:</p>
        <ElInput
          type="number"
          v-model={data.value.left}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>
          <span>绑定字段:</span>
          <span style="color:red">(当前为{data.value.custom})</span>
        </p>
        <ElInput
          v-model={data.value.customAssist}
          placeholder="输入字段名"
          maxlength={20}
          onBlur={handleBlur}
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>文本内容:</p>
        <ElInput
          v-model={data.value.placeholder}
          placeholder="请输入内容"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>遮盖层级:</p>
        <ElInput
          type="number"
          v-model={data.value.zIndex}
          placeholder="预览输入框"
        ></ElInput>
      </div>
    </>
  );
};
let checkboxComponent = (data, AllData) => {
  const handle_backgroundChange = (e) => {
    data.value.backgroundColor = e;
  };
  const handle_fontColorChange = (e) => {
    data.value.color = e;
  };
  const deletecheck = (index) => {
    if (data.value.data.length == 1) {
      ElNotification({
        title: "温馨提示",
        message: "多选框组件至少一个选项哦！",
      });
      return;
    }
    data.value.data.splice(index, 1);
  };
  const handleBlur = () => {
    try {
      if (data.value.customAssist.length == 0) {
        data.value.custom = "value";
        ElNotification({
          title: "温馨提示",
          message: "绑定字段为空时，会被替换为value",
        });
        return;
      }
      let beforeCustom = data.value.custom;
      data.value.custom = data.value.customAssist;
      if (!(data.value.custom in data.value)) {
        data.value[data.value.custom] = deepcopy(data.value[beforeCustom]); //将之前赋予的值都传给新绑定属性
        if (beforeCustom in data.value) {
          //删除之前的自定义属性
          delete data.value[beforeCustom];
        }
      }
      ElNotification({
        title: "恭喜绑定成功",
        message: `绑定字段为${data.value.custom}`,
      });
      data.value.customAssist = "";
    } catch (error) {
      //因为是jsx，这个整体dom都没了，被干掉了估计，释放的太快了
      ElNotification({
        title: "绑定字段失败！",
        message: "只有任意点击画布区域外才能保存成功哦！",
      });
    }
  };
  return (
    <>
      <div class="text_picker">
        <div class="addCheck">
          <span>组件控制</span>
          <span
            onClick={() =>
              AllData.blocks.splice(
                AllData.blocks.findIndex((item) => item.id == data.value.id),
                1
              )
            }
          >
            删除组件
          </span>
        </div>
      </div>
      <div class="text_attr">
        <p>距离顶部距离:</p>
        <ElInput
          type="number"
          v-model={data.value.top}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>距离左边距离:</p>
        <ElInput
          type="number"
          v-model={data.value.left}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>
          <span>绑定字段:</span>
          <span style="color:red">(当前为{data.value.custom})</span>
        </p>
        <ElInput
          v-model={data.value.customAssist}
          placeholder="输入字段名"
          maxlength={20}
          onBlur={handleBlur}
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>遮盖层级:</p>
        <ElInput
          type="number"
          v-model={data.value.zIndex}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      {/* <div class="text_attr">
        <p>宽度:</p>
        <ElInput
          type="number"
          v-model={data.value.width}
          placeholder="区块宽度"
          onBlur={() => {
            handleBlur();
          }}
        ></ElInput>
      </div> */}
      <div class="text_check">
        <div class="addCheck">
          <span>多选框选项</span>
          <span
            onClick={() => {
              if (data.value.data.length < 7) {
                data.value.data.push({
                  label: "默认文字",
                  disabled: false,
                });
                data.value.width = data.value.data.length * 100;
              } else {
                ElNotification({
                  title: "温馨提示",
                  message: "多选框选项最多8个哦！",
                });
              }
            }}
          >
            新增
          </span>
        </div>
        {data.value.data.map((item, index) => {
          return (
            <div class="checkOptions">
              <span>{index + 1}</span>
              <div class="checkInput">
                <div class="checkChild">
                  <span>选项名:</span>
                  <ElInput v-model={item.label} placeholder="中文"></ElInput>
                </div>
                <div class="checkChild">
                  <span>是否禁用:</span>
                  <ElSwitch v-model={item.disabled} />
                </div>
              </div>
              <div class="checkBtn">
                <span
                  onClick={() => {
                    deletecheck(index);
                  }}
                >
                  删除
                </span>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};
let tableComponent = (data, AllData) => {
  const handle_backgroundChange = (e) => {
    data.value.backgroundColor = e;
  };
  const handle_fontColorChange = (e) => {
    data.value.color = e;
  };
  const deleteHead = (index) => {
    if (data.value.heads.length == 1) {
      ElNotification({
        title: "温馨提示",
        message: "表格组件的表头参数至少一个哦！",
      });
      return;
    }
    data.value.heads.splice(index, 1);
  };
  return (
    <>
      {/* <div class="text_picker">
        <div class="addCheck">
          <span>组件控制</span>
          <span
            onClick={() =>
              AllData.blocks.splice(
                AllData.blocks.findIndex((item) => item.id == data.value.id),
                1
              )
            }
          >
            删除组件
          </span>
        </div>
      </div> */}
      {/* <div class="text_attr">
        <p>距离顶部距离:</p>
        <ElInput
          type="number"
          v-model={data.value.top}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>距离左边距离:</p>
        <ElInput
          type="number"
          v-model={data.value.left}
          placeholder="预览输入框"
        ></ElInput>
      </div> */}
      {/* <div class="text_attr">
        <p>表格固定高度:</p>
        <ElInput
          type="number"
          v-model={data.value.height}
          placeholder="固定高度"
        ></ElInput>
      </div> */}
      <div class="text_attr">
        <p>遮盖层级:</p>
        <ElInput
          type="number"
          v-model={data.value.zIndex}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>数据库名称:</p>
        <ElInput v-model={data.value.database} placeholder="数据库名"></ElInput>
      </div>
      <div class="text_attr">
        <p>数据表名称:</p>
        <ElInput v-model={data.value.table} placeholder="数据表名"></ElInput>
      </div>
      <div class="text_Btn">
        <p>表格顶部功能按钮开关:</p>
        {data.value.controlBtn.map((item) => {
          return (
            <div class="btnChild">
              <span style={{ color: item.color }}>功能名称:{item.name}</span>
              <ElSwitch v-model={item.show} />
            </div>
          );
        })}
      </div>
      <div class="text_Btn">
        <p>表格内部右侧功能按钮开关:</p>
        {data.value.tableInBtn.map((item) => {
          return (
            <div class="btnChild">
              <span style={{ color: item.color }}>功能名称:{item.name}</span>
              <ElSwitch v-model={item.show} />
            </div>
          );
        })}
      </div>
      <div class="text_table">
        <div class="addHead">
          <span>表格头部参数:</span>
          <span
            onClick={() => {
              if (data.value.heads.length < 14) {
                data.value.heads.push({
                  label: "默认表头名",
                  prop: "colums",
                  width:100,
                  sensitivity:false
                });
              } else {
                ElNotification({
                  title: "温馨提示",
                  message: "表头字段最多14个哦！",
                });
              }
            }}
          >
            新增
          </span>
        </div>
        {data.value.heads.map((item, index) => {
          return (
            <div class="headOptions">
              <span>{index + 1}</span>
              <div class="headInput">
                <div class="headChild">
                  <span>表头名:</span>
                  <ElInput v-model={item.label} placeholder="中文"></ElInput>
                </div>
                <div class="headChild">
                  <span>字段名:</span>
                  <ElInput v-model={item.prop} placeholder="字段"></ElInput>
                </div>
              </div>
              <div class="headBtn">
                <div class="tableSwitch">
                  <span>普通/敏感</span>
                  <ElSwitch v-model={item.sensitivity}/>
                </div>
                <div class="tableDelete">
                  <span
                    onClick={() => {
                      deleteHead(index);
                    }}
                  >
                    删除表头
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};
let paginationComponent = (data, AllData) => {
  const handle_backgroundChange = (e) => {
    data.value.backgroundColor = e;
  };
  const handle_fontColorChange = (e) => {
    data.value.color = e;
  };
  return (
    <>
      <div class="text_picker">
        <div class="addCheck">
          <span>组件控制</span>
          <span
            onClick={() =>
              AllData.blocks.splice(
                AllData.blocks.findIndex((item) => item.id == data.value.id),
                1
              )
            }
          >
            删除组件
          </span>
        </div>
      </div>
      <div class="text_attr">
        <p>距离顶部距离:</p>
        <ElInput
          type="number"
          v-model={data.value.top}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>距离左边距离:</p>
        <ElInput
          type="number"
          v-model={data.value.left}
          placeholder="预览输入框"
        ></ElInput>
      </div>
      <div class="text_attr">
        <p>遮盖层级:</p>
        <ElInput
          type="number"
          v-model={data.value.zIndex}
          placeholder="预览输入框"
        ></ElInput>
      </div>
    </>
  );
};
let icons = [
  {
    name: "Search",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <Search />
        </ElIcon>
      );
    },
  },
  {
    name: "CirclePlus",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <CirclePlus />
        </ElIcon>
      );
    },
  },
  {
    name: "Setting",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <Setting />
        </ElIcon>
      );
    },
  },
  {
    name: "DeleteFilled",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <DeleteFilled />
        </ElIcon>
      );
    },
  },
  {
    name: "CaretBottom",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <CaretBottom />
        </ElIcon>
      );
    },
  },
  {
    name: "Download",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <Download />
        </ElIcon>
      );
    },
  },
  {
    name: "Upload",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <Upload />
        </ElIcon>
      );
    },
  },
  {
    name: "Pointer",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <Pointer />
        </ElIcon>
      );
    },
  },
  {
    name: "Grid",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <Grid />
        </ElIcon>
      );
    },
  },
  {
    name: "Delete",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <Delete />
        </ElIcon>
      );
    },
  },
  {
    name: "Refresh",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <Refresh />
        </ElIcon>
      );
    },
  },
  {
    name: "Expand",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <Expand />
        </ElIcon>
      );
    },
  },
  {
    name: "Fold",
    render: (value) => {
      return (
        <ElIcon size={value}>
          <Fold />
        </ElIcon>
      );
    },
  },
];
let iconMap = {};
icons.forEach((item, index) => {
  iconMap[item.name] = item.render;
});
let iconComponent = () => {
  return (
    <div class="iconContain">
      <div class="iconTitle">内置可选图标库(输入对应名称即可):</div>
      <div class="text_icon">
        {icons.map((item) => {
          return (
            <>
              <div class="iconBox">
                {item.render(20)}
                <p>{item.name}</p>
              </div>
            </>
          );
        })}
      </div>
    </div>
  );
};
export {
  treeComponent,
  textComponent,
  boxComponent,
  buttonComponent,
  selectComponent,
  datetimeComponent,
  inputComponent,
  tableComponent,
  paginationComponent,
  checkboxComponent,
  iconMap,
};
